<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>风景</title>
		<link rel="stylesheet" type="text/css" href="css/views.css" />
		<link rel="stylesheet" type="text/css" href="css/secnery.css"/>
	</head>
	<body>
		<!--  -->
		<header>
			<img src="img/ban01.jpg">
		</header>
		<!--  -->
		<div class="main_body">
			<div class="nav">
				<a class="item" onclick="showmap()" style="cursor: pointer;"><span class="item_t iconfont">&#xe605;<p>地点</p></span>
				</a><a href="index.html" class="item"><span class="item_t iconfont">&#xe646;<p>主页</p></span>
				</a><a href="views_foods.html" class="item"><span class="item_t iconfont">&#xe60c;<p>美食</p></span>
				</a><a href="views_write.html" class="item"><span class="item_t iconfont">&#xe652;<p>游记</p></span>
				</a>
			</div>
			
			<div class="left_content conts">
				<div class="item">
					<div class="imgs">
						<img src="./img/banner03.jpg" >
						<img src="img/banner02.jpg" >
						<img src="./img/ban04.jpg" >
					</div>
					
					<div class="texts">
						<h4>收藏你喜欢的旅行灵感</h4>
						<ul>
							<li>寻求像你一样的旅行者的共鸣</li>
							<li>与众不同的旅行体验</li>
							<li>美好的旅行分享，最好的优惠策略</li>
						</ul>
						<button type="button" onclick="gourl()">撰写游记</button>
						
					</div>
				</div>
			</div>
			<div class="midle_content conts">
				<div class="item">
					<div class="texts">
						<h3><img src="https://picsum.photos/360/460?random=1">尼伯龙根</h3>
						<p>
							尼伯龙根，起源于古代北欧的 Nilfheim（Nibelheim），在北欧神话中意指“死人之国”或“雾之国”。中世纪德语称住在那里的人为“Nibelung”。
							是每个炼金大师都渴望去的炼金圣地，因为在那里的每1件东西都是死的，而炼金的基本概念就是用高温的火焰将金属“杀死”再用极致的精神使它“复活”从而提升金属强度，而用以“杀死”金属的高温火焰非常难得到
							它存于现实世界中，有着某些与现实世界相似的规则，但入口无法找到，要么被龙类选择，要么死后才能进入
						</p>
					</div>
					
					<div class="pictures">
						<img src="./img/banner04.jpg" >
						<img src="img/banner02.jpg" >
						<img src="img/banner03.jpg" >
						<img src="img/banner01.jpg" >
					</div>
					<div class="comments">
						<input type="" name="" id="" value="" placeholder="说点什么....."/>
						<span class="iconfont">&#xe69b;</span>
						<div class="more">
							<p class="iconfont2">
								<img src="https://picsum.photos/360/460?random=2" >
								:图拿走了。
							</p>
							<p class="iconfont2">
								<img src="https://picsum.photos/360/460?random=3" >
								:有点意思。
							</p>
							<p class="iconfont2">
								<img src="https://picsum.photos/360/460?random=4" >
								:哇哇哇哇哇......
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="right_content conts">
				<div class="item">
					<h2>探索尼伯龙根</h2>
					<img src="./img/banner04.jpg" >
					<img src="img/banner02.jpg" >
					<img src="img/banner03.jpg" >
					<img src="img/banner01.jpg" >
				</div>
			</div>
	
		</div>
		<!--  -->
		<footer>
			<div onclick="closemap()">
				关闭
			</div>
		</footer>
		<script src="js/views.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function showmap(){
				var map = document.getElementsByTagName("footer");
				console.log(map);
				map[0].style.display="block";
			}
			function closemap(){
				var map = document.getElementsByTagName("footer");
				console.log(map);
				map[0].style.display="none";
			}
			function gourl(){
				window.location.href="views_write.html";
			}
		</script>
	</body>
</html>
